<template>
  <div>
    <!--面包屑-->
    <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
      <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >物品配置管理</el-breadcrumb-item>
        <el-breadcrumb-item >品牌总览</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--选择区域-->
    <div style="padding: 20px;">
      <i class="el-icon-search lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">模糊查询</span>
          <span style="margin-left:45%;">品牌名称或首字母：</span>
          <el-input
            style="width: 280px;margin-top: -8px;"
            placeholder="请输入品牌组名称或首字母"
            v-model="findBrandsForm.brandName"
            clearable>
          </el-input>
        <el-button @click="loadAllBrands()" size="medium" style="border-radius: 0%;background-color: #666666;margin-left: 5%;" type="info">查询</el-button>
      </div>
    </div>
    <!--数据区域-->
    <div style="padding: 20px;padding-top: 0px;">
      <i class="el-icon-s-grid lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">数据列表</span>
        <el-button size="small" @click="updateBrandWindow" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
        type="info">修改</el-button>
        <el-button size="small" @click="addBrandWindow" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
        type="info">新增</el-button>
      </div>
      <div>
        <el-table
          :data="page.records"
          :row-style="{height:'46px'}"
          @selection-change="select"
          border
          :header-cell-style="tableHeader"
          :cell-style="{borderColor:'#CCCCCC',margin:'0',padding:'0'}"
          style="width: 100%;font-size: 18px;border: #CCCCCC solid 1px;">
          <el-table-column
            align="center"
            type="selection"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="sortNo"
            label="编号"
            width="180px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="brandName"
            label="品牌名称"
            width="200px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="brandLetter"
            label="品牌首字母">
          </el-table-column>
          <el-table-column
            align="center"
            prop="brandDesc"
            label="品牌描述"
            width="320px">
          </el-table-column>
          <el-table-column
            align="center"
            label="是否显示"
            width="160px">
            <template slot-scope="scope">
              {{scope.row.isShow==0?"不显示":"显示"}}
            </template>
          </el-table-column>
        </el-table>
      </div>
        <!--分页-->
      <div style="background-color: #D7D7D7;height: 98px;width: 100%;">
        <el-pagination
        class="rf"
        style="margin-right: 2%;margin-top: 40px;"
          @current-change="handleCurrentChange"
          :current-page.sync="page.current"
          :page-size="13"
          layout="prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>

 <el-dialog
    title="新增品牌"
    :visible.sync="dialogVisible1"
    width="60%">
    <el-row style="margin-top: 10px;">
      <el-col :span="18" :offset="2">
       <el-input v-model="brand.brandName" placeholder="请输入品牌名称"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px;">
      <el-col :span="18" :offset="2">
      <el-input type="textarea"
        :rows="6" v-model="brand.brandDesc" placeholder="请输入品牌简介"></el-input>
      </el-col>
    </el-row>
    <div style="text-align: center">
    <p style="">适用分类</p>
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="brand.catIds"
        filterable
        :titles="['待选分类', '已选分类']"
        :button-texts="['<', '>']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        @change="handleChange1"
        :data="infos"
        :props="{
              key: 'catId',
              label: 'catName'
            }">
      </el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addBrand">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog
     title="修改品牌"
     :visible.sync="dialogVisible2"
     width="60%"
     >
     <div style="padding-top: 60px;width: 99.8%;min-height: 600px;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #F2F2F2;">
       <div>
         <span style="margin-left:10%;">编号 </span>
         <el-input
           style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
           disabled
           v-model="updateBrand.sortNo"
           clearable>
         </el-input>
       </div>
       <div>
         <span style="margin-left:10%;">品牌名称 </span>
         <el-input
           style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
           placeholder="请输入名称"
           v-model="updateBrand.brandName"
           clearable>
         </el-input>
       </div>
       <div>
         <span style="margin-left:10%;">品牌首字母 </span>
         <el-input
           style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
           disabled
           v-model="updateBrand.brandLetter"
           clearable>
         </el-input>
       </div>
       <div>
         <span style="margin-left:10%;">品牌描述</span>
         <el-input
          type="textarea"
          rows="5"
           style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
           placeholder="请输入品牌描述"
           v-model="updateBrand.brandDesc"
           clearable>
         </el-input>
       </div>
       <div style="margin-bottom: 40px;">
         <span style="margin-left:10%;margin-right: 2%;">是否显示 </span>
         <el-radio
           v-for="n in state"
           v-model="updateBrand.isShow"
           :key="n" :label="n">{{n==0?"否":"是"}}</el-radio>
       </div>
       <div style="text-align: center">
       <p style="">适用分类</p>
         <el-transfer
           style="text-align: left; display: inline-block"
           v-model="updateBrand.catIds"
           filterable
           :titles="['待选分类', '已选分类']"
           :button-texts="['<', '>']"
           :format="{
             noChecked: '${total}',
             hasChecked: '${checked}/${total}'
           }"
           @change="handleChange"
           :data="infos"
           :props="{
                 key: 'catId',
                 label: 'catName'
               }">
         </el-transfer>
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="updateBrandaaa()">确 定</el-button>
     </span>
   </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"Brand",
    data(){
      return{
      findBrandsForm:{
       pageNum:1,
       pageSize:10,
       brandName:"",
       brandLetter:""
      },
      page:{},
      brand:{},
      updateBrand:{},
      dialogVisible1:false,
      dialogVisible2:false,
      selection:[],
      state:[0,1],
      infos:[]
      }
    },
    methods:{
      findAllCat(){
        this.$http.get("/goods/goodsCat/findAllCat").then(resp=>{
          this.infos=resp.data.data
        })
      },
      select(selection){
        this.selection = selection
      },
      updateBrandaaa(){
        console.log(this.updateBrand)
      this.$http.post("/goods/brand/updateBrand",this.updateBrand).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '修改品牌成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
        this.updateBrand={}
        this.dialogVisible2=false
        this.loadAllBrands()
      })
      },
      updateBrandWindow(){
        if(this.selection.length>1){
          this.$message({
            message: "一次只能选择一个品牌进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else if(this.selection.length<1){
          this.$message({
            message: "请选择一个品牌进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else{
          let j = JSON.stringify(this.selection[0]);
          this.updateBrand=JSON.parse(j)
          if(this.updateBrand.list==null||this.updateBrand.list==undefined){
            this.updateBrand.catIds=[]
          }else{
          let ids = new Array()
          for (var i = 0; i < this.updateBrand.list.length; i++) {
            let info = this.updateBrand.list[i]
            ids.push(info.catId)
          }
          this.updateBrand.catIds = ids
          }
          this.dialogVisible2=true
        }
      },
      addBrand(){
      this.$http.post("/goods/brand/addBrand",this.brand).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '添加品牌成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
        this.dialogVisible1=false
        this.brand={}
        this.loadAllBrands()
        this.findAllCat()
      })
      },
      addBrandWindow(){
        this.dialogVisible1=true,
        this.brand={}
      },
    loadAllBrands(){
      this.findBrandsForm.brandLetter=this.findBrandsForm.brandName
      this.$http.post("/goods/brand/findBrands",this.findBrandsForm).then(resp=>{
        this.page=resp.data.data
      })
    },
    handleCurrentChange(val){
      this.findBrandsForm.pageNum=val
      this.loadAllBrands()
    },
    /**
     * 表格表头样式
     */
    tableHeader({ row, column, rowIndex, columnIndex }){
      if (rowIndex === 0) {
        return 'display: table-cell;background-color: #D7D7D7;color:#333333;font-size:18px;font-weight: 500;height: 40px;margin-top: 85px;border-color:#CCCCCC;'
      }
    },
    /**
     * 穿锁框变换
     * @param {Object} value      值
     * @param {Object} direction  方向
     * @param {Object} movedKeys  当前变换值
     */
    handleChange(value, direction, movedKeys) {
      this.updateBrand.catIds = value
      this.$forceUpdate()
    },
    handleChange1(value, direction, movedKeys){
      this.brand.catIds = value
      this.$forceUpdate()
    }
    },
    created(){
      this.loadAllBrands()
      this.findAllCat()
    }
  }
</script>

<style>
</style>
